<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="jquery-1.8.0.js"></script>
    <script type="text/javascript">
        $(function () {
            //1.使用:checked选择器来操作多选框:复选框的选中状态
            function countChecked() {
				//1.此种方法不准确  因为如果页面中也有单选按选的话 不准确
                //var n = $("input:checked").length; //统计复选框被选中的个数    $("#form1 :checkbox"):
				
				//2.比较严格  表单id为form1的表单元素下的 input（name是newsletter）的input元素 并且还要选中的状态  
				var n=$("#form1 input[name=newsletter]:checked").length;
                //把n放到第一个空的div中去呈现
                $("div").eq(0).html("<strong>有" + n + "个被选中!</strong>"); //等价于js中的innerHTML属性
            }
            //进入页时就调用此方法，因为有两个默认选取中项需要呈现
            countChecked();

            //使用:checked选择来操作多个复选框，复选框的选项单击时重新调用countChecked()
            $(":checkbox").click(countChecked);

            //2.对表单内 可用input 赋值操作
            $("#btn1").click(function () {
                $("#form1 input:enabled").val("这里发生变化了!");
                return false;
            });

            //3.对表单内 不可用input 赋值操作
            $("#btn2").click(function () {
                $("#form1 input:disabled").val("这里发生变化了!");
                return false;
            });

            //4.使用:selected选择器，来操作下拉列表
            $("select").change(function () {
                var str = "";
                $("select :selected").each(function () {
                    str += $(this).text() + ","; //用each函数来遍历下拉列表中所有选中的项
                });
                //把str放到页面中第二个div中去
                $("div").eq(1).html("<strong>" + str + "</strong>");

            }).trigger('change');//trigger和数据库中的触发器很像
            //trigger('change')在这里的意思是：select下拉列表加载后，马上执行change事件
            //或者也可以用.change()代替

            //5.重置所有表单元素:包括复选框和下拉列表的初始被选中状态
            $(":reset").click(function () {
                setTimeout(function () {
                    countChecked(); //调用统计复选框的选中状态
                    $("select").change()//调用下拉列表的change事件  进而对选中进行统计
                },0);
                ;
            });

        });
    </script>
</head>
<body>
  <h3> 表单对象属性过滤选择器.</h3>
   <form id="form1" action="#">
	<button type="reset">重置所有表单元素</button>
	<br /><br />
  <button id="btn1">对表单内 可用input 赋值操作.</button>
  <button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br />
	
     可用元素：<input name="add" value="可用文本框"/>  <br/>
     不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/>
     可用元素： <input name="che" value="可用文本框" /><br/>
	 不可用元素：<input name="name" disabled="disabled"  value="不可用文本框"/><br/>
	 <br/>
     多选框：<br/>
	 <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
     <input type="checkbox" name="newsletter" value="test2" />test2
     <input type="checkbox" name="newsletter" value="test3" />test3
     <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
     <input type="checkbox" name="newsletter" value="test5" />test5
	 <div></div>
 
	 <br/><br/>
     下拉列表1：<br/>
	<select name="test" multiple="multiple" size="6">
		<option>浙江</option>
		<option selected="selected">湖南</option>
		<option>北京</option>
		<option selected="selected">天津</option>
		<option>广州</option>
		<option>湖北</option>
    </select>
    
     <br/><br/>
     下拉列表2：<br/>
	<select name="test2" >
    <option>浙江</option>
    <option>湖南</option>
    <option selected="selected">北京</option>
    <option>天津</option>
    <option>广州</option>
    <option>湖北</option>
    </select>
	<br/><br/>
 
     <div></div>
  </form>
